.textInputFieldWrapper {
  display: grid;
  grid-template-areas: 'label' 'input';
}

.textInputFieldWrapper input[type='text'],
.textInputFieldWrapper input[type='password'] {
  border-radius: var(--space-3xs);
  grid-area: input;
  width: 100%;
  height: 40px;
  background: var(--input-background);
  font-family: var(--primary-font-family), 'Noto Color Emoji';
  font-weight: normal;
  font-size: var(--text-md);
  line-height: 19px;
  color: var(--text-secondary);
  text-indent: 22px;
  border: none;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 100px;

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

.textInputFieldWrapper label {
  grid-area: label;
  text-align: start;
}

.textInputFieldWrapper .inputIcon {
  grid-area: input;
  align-self: center;
  justify-self: flex-end;
  margin-inline-end: 1rem;
  display: flex;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  font-size: var(--text-lg);
  border: none;
  background: none;
  color: var(--text-default);
  padding: var(--space-3xs) var(--space-2xs);
  &:disabled {
    opacity: 0.7;
    .MuiSvgIcon-root {
      cursor: not-allowed;
    }
  }
}

.textInputFieldWrapper .inputIcon ~ input {
  padding-inline-end: 50px;
}

.textInputFieldWrapper.withRightButton {
  grid-template-areas: 'label label' 'input button';
  grid-template-columns: auto min-content;
  grid-column-gap: var(--space-xs-fixed);
}

.textInputFieldWrapper.withRightButton .rightButton {
  grid-area: button;
}

.textInputFieldWrapper .smallMessage {
  margin: var(--space-md) 0;
}
